<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn">点点我</button>
    <script>
        var btn = document.querySelector('.btn');
        const person = {
            name:'黎绍原',
            age:21,
            sex:'男'
        }
        function reactive(target){
            //判断target是否是一个对象
            if(typeof target !== 'object') return target
            return new Proxy(target,{
                get(target,property){
                    const value = Reflect.get(target,property)
                    return reactive(value);
                    console.log('收集依赖');
                },
                set(target,property,value){
                    Reflect.set(target,property,value)
                    console.log('通知依赖更新');
                },
                deleteProperty(target,property){
                    Reflect.deleteProperty(target,property)
                    console.log('通知依赖更新');
                }
            })
        }
        const proxyPerson = reactive(person);
        console.log(proxyPerson);
    </script>
</body>
</html>